<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul id="list"></ul>
    <script>
        const total = 10000;
        const once = 20;
        const loopCount = total / 20;
        let countRender = 0;
        const ul = document.getElementById('list');

        function add() {
            const fragment = document.createDocumentFragment();
            for (let i = 0; i < once; i++) {
                const li = document.createElement('li');
                li.innerHTML = Math.floor(Math.random() * 10000);
                fragment.appendChild(li);
            }
            ul.appendChild(fragment);
            countRender++;
            loop()
        }

        function loop() {
            if (countRender < loopCount) {
                window.requestAnimationFrame(add);
            }
        }
        loop()
    </script>
</body>

</html>